<template>
  <div class="my-courses-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Collection /></el-icon>
          <div class="header-text">
            <h2>我的课程</h2>
            <p>我报名和学习的课程</p>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 学习统计 -->
    <div class="stats-row">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#409EFF"><Reading /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.enrolled }}</div>
            <div class="stat-label">已报名</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#E6A23C"><Clock /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.learning }}</div>
            <div class="stat-label">学习中</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#67C23A"><CircleCheck /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.completed }}</div>
            <div class="stat-label">已完成</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#F56C6C"><TrendCharts /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.hours }}</div>
            <div class="stat-label">学习时长(小时)</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 课程列表 -->
    <el-card shadow="never">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="学习中" name="learning" />
        <el-tab-pane label="已完成" name="completed" />
        <el-tab-pane label="全部课程" name="all" />
      </el-tabs>

      <div class="courses-list">
        <div
          v-for="course in filteredMyCourses"
          :key="course.id"
          class="my-course-item"
        >
          <div class="course-cover-small">
            <img :src="course.cover || '/default-course.jpg'" :alt="course.title" />
          </div>
          <div class="course-info">
            <h4 class="course-title">{{ course.title }}</h4>
            <div class="course-meta">
              <span class="meta-text">
                <el-icon><User /></el-icon>
                {{ course.teacher }}
              </span>
              <span class="meta-text">
                <el-icon><VideoPlay /></el-icon>
                {{ course.lessonsCount }}课时
              </span>
            </div>
            <div class="progress-info">
              <span class="progress-text">学习进度：{{ course.progress }}%</span>
              <el-progress :percentage="course.progress" :status="getProgressStatus(course.progress)" />
            </div>
          </div>
          <div class="course-actions">
            <el-button type="primary" @click="handleContinueStudy(course)">
              {{ course.progress === 100 ? '重新学习' : '继续学习' }}
            </el-button>
            <el-button @click="handleViewDetail(course)">课程详情</el-button>
            <el-dropdown @command="(cmd) => handleCommand(cmd, course)">
              <el-button circle>
                <el-icon><MoreFilled /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="certificate" v-if="course.progress === 100">
                    <el-icon><Medal /></el-icon>
                    查看证书
                  </el-dropdown-item>
                  <el-dropdown-item command="note">
                    <el-icon><Document /></el-icon>
                    学习笔记
                  </el-dropdown-item>
                  <el-dropdown-item command="share">
                    <el-icon><Share /></el-icon>
                    分享课程
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>

      <el-empty v-if="filteredMyCourses.length === 0" description="还没有课程，去课程中心看看吧" />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Collection, Reading, Clock, CircleCheck, TrendCharts,
  User, VideoPlay, MoreFilled, Medal, Document, Share
} from '@element-plus/icons-vue'

const router = useRouter()

// 状态
const activeTab = ref('learning')

// 统计数据
const stats = reactive({
  enrolled: 12,
  learning: 5,
  completed: 7,
  hours: 156
})

// 我的课程数据
const myCourses = ref([
  {
    id: 1,
    title: 'Vue 3 从入门到精通',
    teacher: '张三',
    lessonsCount: 45,
    progress: 65,
    cover: '',
    status: 'learning',
    lastStudyTime: '2024-01-15 10:30'
  },
  {
    id: 2,
    title: '产品思维与方法论',
    teacher: '李四',
    lessonsCount: 30,
    progress: 100,
    cover: '',
    status: 'completed',
    lastStudyTime: '2024-01-10 15:20'
  },
  {
    id: 3,
    title: 'React开发实战',
    teacher: '王五',
    lessonsCount: 38,
    progress: 30,
    cover: '',
    status: 'learning',
    lastStudyTime: '2024-01-14 14:00'
  }
])

// 计算属性
const filteredMyCourses = computed(() => {
  if (activeTab.value === 'all') {
    return myCourses.value
  }
  return myCourses.value.filter(c => c.status === activeTab.value)
})

// 方法
const handleContinueStudy = (course) => {
  ElMessage.success('开始学习：' + course.title)
}

const handleViewDetail = (course) => {
  router.push('/learning/courses')
}

const handleCommand = (command, course) => {
  switch (command) {
    case 'certificate':
      ElMessage.info('查看证书：' + course.title)
      break
    case 'note':
      ElMessage.info('学习笔记功能开发中...')
      break
    case 'share':
      ElMessage.success('分享链接已复制到剪贴板')
      break
  }
}

const getProgressStatus = (progress) => {
  if (progress === 100) return 'success'
  if (progress >= 60) return ''
  return 'exception'
}
</script>

<style scoped>
.my-courses-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.courses-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.my-course-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 1px solid #EBEEF5;
  border-radius: 8px;
  transition: all 0.3s;
}

.my-course-item:hover {
  border-color: #409EFF;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.course-cover-small {
  width: 200px;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  flex-shrink: 0;
}

.course-cover-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.course-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.course-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}

.meta-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #606266;
}

.progress-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-text {
  font-size: 13px;
  color: #606266;
}

.course-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
</style>

